<!--
 * @Descripttion: 搜索工具类-设备
 * @LastEditors: xzh
 * @LastEditTime: 2023-10-10 20:54:43
-->
<template>
  <el-skeleton :loading="searchEquipParam.loading" animated>
    <template #template>
      <div class="searchTool-content">
        <el-skeleton-item class="el-col-11" />
        <el-skeleton-item class="el-col-11" />
        <el-skeleton-item class="el-col-11" />
        <el-skeleton-item class="el-col-11" />
      </div>
    </template>
    <template #default>
      <el-col :span="11">
        <el-input
          v-model="searchData.keyWord"
          size="large"
          clearable
          :placeholder="
            $t('page.equipManageArr.equipArchivesArr.searchCondition')
          "
        />
      </el-col>
      <el-col :span="11">
        <!-- 输入框选择对象 -->
        <DileInputSelectItem
          v-model="searchData.typeId"
          :selectType="selectTypeEnum.equipType"
          :expand-on-click-node="false"
          :placeholder="
            $t('common.select') + $t('page.equipManageArr.equipType')
          "
        />
      </el-col>
      <el-col :span="11">
        <!-- 输入框选择对象 -->
        <DileInputSelectItem
          v-model="searchData.positionId"
          :selectType="selectTypeEnum.position"
          :expand-on-click-node="false"
          :placeholder="
            $t('common.select') + $t('page.systemManageArr.position')
          "
        />
      </el-col>
      <el-col :span="11">
        <el-select
          v-model="searchData.statusId"
          size="large"
          :placeholder="
            $t('common.select') + $t('page.equipManageArr.equipState')
          "
        >
          <el-option
            v-for="item in searchEquipParam.equipStateArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </template>
  </el-skeleton>
</template>

<script setup lang="ts">
import { ref, reactive, toRef, onMounted, toRefs } from "vue";
import { selectTypeEnum } from "@/components/dile-selectItem/index.type";
import { object_Inf } from "@/utils/typings/index.type";
import DileInputSelectItem from "@/components/dile-selectItem/selectItem-input/index.vue";
import Dile_APi from "@/api";
import Dile_Methods from "@/utils/methods";

const props = defineProps({
  //搜索数据
  searchData: {
    type: Object,
    requited: true,
    default: {},
  },
});

/**
 * @Author: xzh
 * @Descripttion: 默认搜索数据
 * @Param:
 */
let defaultData = () => ({
  keyWord: "",
  typeId: null, //设备类型
  positionId: null, //存放位置
  statusId: null, //设备状态
});

/**
 * @Author: xzh
 * @Descripttion: 设备检索参数
 * @Param:
 */
let searchEquipParam = reactive<object_Inf>({
  loading: true,
  equipStateArr: [],
});

/**
 * @Author: xzh
 * @Descripttion: 初始化
 * @Param:
 */
onMounted(async () => {
  let { loading } = toRefs(searchEquipParam);
  try {
    loading.value = true;
    reset();
    //加载搜索资源
    await initSearchResource();
  } finally {
    loading.value = false;
  }
});

/**
 * @Author: xzh
 * @Descripttion: 加载搜索资源
 * @Param:
 */
let initSearchResource = async () => {
  await initEquipStateResource();
};

/**
 * @Author: xzh
 * @Descripttion: 加载设备状态资源
 * @Param:
 */
let initEquipStateResource = async () => {
  let equipStateArr = toRef(searchEquipParam, "equipStateArr");
  //加载所有设备状态
  equipStateArr.value = Dile_Methods.filterDataArr(
    (await Dile_APi.getEquipStatePageList()).map((state: object_Inf) => ({
      value: state.id,
      label: state.name,
    }))
  );
};
/**
 * @Author: xzh
 * @Descripttion: 重置
 * @Param:
 */
let reset = () => {
  Object.assign(props.searchData, defaultData());
};

defineExpose({
  reset,
});
</script>
<style lang="scss" scoped>
.el-skeleton {
  :deep(.el-skeleton__item) {
    height: var(--el-component-size-large) !important;
  }
}
</style>
